<template>
  <div>
    <div id="details">
      <div class="header">
        <van-nav-bar
          title="商品详情"
          left-arrow
          @click-left="$router.go(-1)"
          :border="false"
        />
      </div>
      <!-- 商品 -->
      <div class="goods-content">
        <img :src="num.imgname" alt="" v-lazy="num.imgname" />
        <div class="content">
          <!-- 价格 -->
          <div class="goods-price">
            <!-- <span>价格:</span> -->
            <span>￥{{ num.price }}</span>
          </div>
          <!-- <span class="title1">商品:</span> -->
          <div class="goods-name">{{ num.name }}</div>
          <p class="xian"></p>

          <!-- 发货 -->
          <div class="deliver">
            <p class="title2">发货</p>
            <span> 河南郑州</span>
            <span class="sp2">快递：免运费</span>
          </div>
          <p class="xian"></p>
          <!-- 保障 -->
          <div class="deliver">
            <p class="title2">保障</p>
            <span> 7天无理由</span>
            <span class="sp2">·运费险</span>
          </div>

          <!-- <p class="xian"></p> -->
        </div>
      </div>

      <!-- 底部导航 -->
      <div class="footer_nav">
        <div class="nav_list">
          <i
            class="iconfont icon-shoucang"
            v-if="!icon"
            @click="addCollect"
          ></i>
          <i
            class="iconfont icon-shoucang-shoucang"
            v-else
            @click="removeCollect"
          ></i>
          <div class="nav_name">收藏</div>
        </div>
        <div class="add_cart goods_buy" @click="sbumit">加入购物车</div>
        <div class="now_buy goods_buy">立即购买</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getClothe, getClotheImg } from "@/api/clothe"
import {
  addCollectionClothe,
  removeCollectionClothe,
  isCollection,
} from "@/api/clothecollection";
import { addShop, upShop } from "@/api/shopcart";
import { Toast } from "vant";
import { getShopping } from "@/api/login";
export default {
  data() {
    return {
      // 收藏图标
      icon: false,
      clothes: [],
      clothesImg: [],
      cid: this.$route.params.cid,
      num: [],
      ite: [],
      ice: [],
      icc: [],
    };
  },
  methods: {
    //获取购物车数据
    async a() {
      const data = await getShopping({ uid: this.$store.state.user.uid });
      this.ite = data.data.message;

      console.log(this.ite);
    },
    // 添加购物车
    sbumit() {
      if (
        this.ite.imgname == this.ite.imgname ||
        this.ite.name == this.ite.name ||
        this.ite.num == this.ite.num ||
        this.ite.paynumer == this.ite.paynumer ||
        this.ite.price == this.ite.price ||
        this.ite.sid == this.ite.sid ||
        this.ite.uid == this.ite.uid ||
        this.ite.uname == this.ite.uname
      ) {
        addShop({
          uid: this.$store.state.user.uid,
          uname: this.$store.state.user.uname,
          cid: this.num.cid,
          name: this.num.name,
          imgname: this.num.imgname,
          price: this.num.price,
          paynumber: this.num.paynumer,
          num: 1,
        }).then((res) => {
          console.log(res);
          this.ice = res.data.message;
        });
        return;
      } else {
        upShop({
          uid: this.$store.state.user.uid,
          name: this.ite.name,
          num: this.ite.num++,
        }).then((res) => {
          console.log(99999999999);
          console.log(res);
          this.icc = res.data.message;
          console.log(this.icc);
        });
      }
    },

    // 获取智能穿戴信息
    async getWear() {
      console.log(this.$store.state.user.uid);
      const data = await getClothe();
      this.clothes = data.data.message;
      console.log(this.clothes);
      data.data.message.forEach((item) => {
        if (item.cid == this.cid) {
          this.num.push(item);
        }
      });
      this.num = this.num[0];
      // 判断用户是否已收藏推荐
      isCollection({
        uid: this.$store.state.user.uid,
        name: this.num.name,
      }).then(result => {
        if (result.data.status != 200) {
          this.icon = true;
        } else {
          this.icon = false;
        }
        console.log(result)
      })
    },
    //添加收藏
    addCollect() {
      if (!this.icon) {
        addCollectionClothe({
          paynumber: this.num.paynumer,
          cid: this.cid,
          uid: this.$store.state.user.uid,
          uname: this.$store.state.user.uname,
          name: this.num.name,
          price: this.num.price,
          imgname: this.num.imgname,
        }).then(res => {
          console.log(res)
          if (res.data.status != 200) {
            this.icon = false
            return Toast.fail({ message: '收藏失败!' })
          }
          this.icon = true;
          return Toast.success({ message: "收藏成功!" });
        });
      }
    },
    //删除收藏
    removeCollect() {
      if (this.icon) {
        removeCollectionClothe({
          uid: this.$store.state.user.uid,
          name: this.num.name,
        }).then((res) => {
          console.log(res);
          if (res.data.status != 200) {
            this.icon = true
            return Toast.fail({ message: 'err!' })
          }
          this.icon = false
          return Toast.success({ message: '已取消收藏!' })
        })
      }
    },
    // 获取智能穿戴信息图片
    async getWearImg() {
      const data = await getClotheImg()
      console.log(data)
      this.clothesImg = data.data.message
      data.data.message.forEach(item => {
        if (item.cid == this.cid) {
          this.num.push(item);
        }
      });
    },

    //返回上一页
    goOff() {
      this.$router.go(-1)
    },
  },
  mounted() {
    this.getWear();

    this.a();
  },
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: '黑体';
  }
}

* {
  margin: 0;
  padding: 0;
}

#details {
  position: relative;
  z-index: 9;
  height: 100vh;
  background-color: #fff;
  overflow-y: auto;
  width: 340px;
}

a {
  color: white;
}

img {
  width: 320px;
  height: 240px;
  border-radius: 20px;
  // margin-top: 20px;
}

.goods-content {
  width: 300px;
  margin: auto;
  align-items: center;
}

.content {
  margin-bottom: 10px;
  width: 100%;
  //line-height: 1.6;
}
.title1 {
  // font-family: '黑体';
  font-weight: bold;
  font-size: 17px;
}
.goods-name {
  font-family: '黑体';
  font-weight: bold;
  font-size: 17px;
  // border-bottom: 1px solid #cccccc;
  padding: 0 0 10px 0;
  display: inline-block;
}
.xian {
  height: 2px;
  background-color: rgb(246, 244, 244);
}

.goods-price {
  padding: 10px 0 10px 0;
  color: red;
  font-size: 20px;

  > span:first-child {
    display: inline-block;
    
    color: rgb(255, 255, 255);
    padding: 0 2px;
  }

  > span:last-child {
    color: red;
    font-size: 20px;
    font-weight: bold;
  }
}

.footer_nav {
  display: flex;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 60px;
}

.nav_list {
  //align-items: center;
  width: 100%;
  text-align: center;
  //height: 96px;
  line-height: 1;
  //margin-top: 4px;
  // line-height: 60px;
  margin-top: 6px;
  margin-left: -20px;
}

.nav_list .iconfont {
  font-size: 20px;
}

.nav_name {
  font-size: 16px;
  color: #7d7d7d;
}

.goods_buy {
  font-family: '黑体';
  width: 100%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: white;
  font-size: 20px;
  //border-radius: 50px;
  border-radius: 20px;
  margin-right: 10px;
}

.add_cart {
  background: #ff9500;
}

.now_buy {
  background: red;
}

.icon-shoucang-shoucang:before {
  color: red;
}
//发货
.deliver {
  font-size: 17px;
  margin-bottom: 10px;

  > span {
    color: #7d7d7d;
    font-size: 15px;
  }
}
.deliver .title2 {
  font-size: 17px;
  font-weight: bold;
  padding: 10px 0 0 0;
}
.sp2 {
  margin-left: 20px;
}
</style>
